<template>
	<view>
<!-- #ifdef APP-PLUS |H5 -->
		<view class="status_bar"></view>
<!-- #endif -->
		<view class="nav_height"></view>
		
		<view class="nav padding">
			<u-icon class="icon" name="arrow-left" size="40" @click="back"></u-icon>
			<view class="title">限时特卖
				<view class="time">
					<text class="text">{{status==1?'距结束':'距开始'}}</text>
					<u-count-down :show-days="true" :timestamp="timestamp" separator="zh" color="#fff" bg-color="#5E5E5E"></u-count-down>
				</view>
			</view>
		</view>
		<view class="padding">
			<scroll-view :scroll-x="true" class="parts">
				<view class="inblock" v-for="(item,index) in partsData" @click="select(index,item)">
					<view :class="['part flex-column',{on:selectIndex==index}]" >
						<view class="name">{{item.name}}</view>
						<view>{{item.status==1?'进行中':'即将开始'}}</view>
					</view>
				</view>
			</scroll-view>			
		</view>
		<view class="content padding">
			<view class="list flex-btw" v-for="item in goodsList" :key="item.id" @click="toDetail(item.goods_id)">
				<image class="img" :src="item.img" mode=""></image>
				<view class="content_right">
					<view class="top flex-btw">
						<view class="top_left">
							<text v-show="canshowprice" class="price">活动价：￥<text class="num">{{item.price}}</text>/{{item.goods_spu.spu_name.title}}</text>
							<view v-show="canshowprice" class="price old">原价：￥<text class="num">{{item.market_price}}</text>/{{item.goods_spu.spu_name.title}}</view>
						</view>
						<view>
							<image v-if="status==1" @click.stop="showCart(item)" class="add" src="../../static/image/shop.png" mode=""></image>
						</view>
					</view>
					<view class="name">{{item.goods_name}}</view>
					<view class="bottom flex-btw">
						<view class="tags">
							<view class="tag">特卖</view>
						</view>
						<view class="store">
							<text>起订量：{{item.minimum}}</text>
							<text style="margin-left:24rpx;">剩余库存：{{item.inventory_surplus}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<my-addcart ref="minicart" :canshowprice="canshowprice"></my-addcart>
	</view>
</template>

<script>
import {$https} from '@/static/js/request.js';
import MixinShowprice from '@/static/js/mixinshowprice.js'
export default {
	data() {
		return {
			partsData:[],	//场次
			goodsList:[],	//商品列表
			page:1,
			alltotal:0,
			nowId:null,	//当前场次id
			selectIndex:0,	//当前选择的场次
			status:0,	//当前所选场次的状态
			timestamp:0,	//当前所选场次的倒计时
			canshowprice:null,
		};
	},
	mixins:[MixinShowprice],
	onLoad(){
		this.getData();
	},
	methods:{
		getData(){
			$https('GET','getPanicBuyList',{},res=>{
				if(res.data.errcode==0){
					let data = res.data.data;
					this.partsData = data;
					this.status = data[0].status;
					let now = (new Date().getTime()/1000).toFixed(0);
					this.timestamp = data[0].status==1 ? (data[0].end_time - now) : (data[0].start_time - now);
					this.getGoods(data[0].id,1);
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.errmsg
					})
				}
			})
		},
		getGoods(id,page){
			var params = {
				id,
				page,
				size:15,
			}
			$https('GET','getPanicBuyGoodsList',params,res=>{
				if(res.data.errcode==0){
					this.page = page;
					this.nowId = id;
					this.alltotal = res.data.data.count;
					if(page==1){
						this.goodsList = res.data.data.list;
					}else{
						let oldData = this.goodsList;
						this.goodsList = oldData.concat(res.data.data.list);
					}
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.errmsg
					})
				}
			})
		},
		select(index,data){
			this.selectIndex = index;
			this.status = data.status;
			let now = (new Date().getTime()/1000).toFixed(0);
			this.timestamp = this.status==1 ? (data.end_time - now) : (data.start_time - now);
			this.getGoods(data.id,1);
		},
		toDetail(id){
			uni.navigateTo({
				url:`/pages/index/shopdetail?id=${id}`
			})
		},
		//显示小购物车
		showCart(data) {
			let newData = {
				id:data.goods_id,
				name:data.goods_name,
				img:data.img,
				is_standard:data.is_standard,
				spu:[{
					market_price:data.price,
					id:data.goods_spu.id,
					minimum:data.minimum,
					inventory_left:data.inventory_surplus,
					designated_inventory:1,	//是否限量库存 1:有限制 
					spu_name:data.goods_spu.spu_name.title,
					unit:data.goods_spu.spu_unit.title,
				}],
				
			}
			this.$refs.minicart.open(newData)
		},
		back() {
			// #ifdef H5
				window.history.back(-1);
			// #endif 
			// #ifndef H5
			uni.navigateBack();
			// #endif	
		},
	},
	onReachBottom(){
		if(this.goodsList.length<this.alltotal){
			this.page++;
			this.getGoods(this.nowId,this.page);
		}
	},
}
</script>

<style lang="scss" scoped>
/deep/.u-drawer {
	overflow: unset!important;
}
.status_bar{
	width:100%;
	height:var(--status-bar-height);
	background:#F6F6F7;
}
.nav_height{
	width:100%;
	height:88rpx;
	margin-top:var(--status-bar-height);
}
.padding{
	padding:0 34rpx;
}
.nav{
	display: flex;
	align-items: center;
	height:88rpx;
	position: fixed;
	left:0;
	right:0;
	// #ifndef MP-WEIXIN
	top:var(--status-bar-height);
	// #endif
	// #ifdef MP-WEIXIN
	top:0;
	// #endif
	background:#F6F6F7;
	z-index: 999;
	.icon{
		width:68rpx;
		height:100%;
	}
	.title{
		font-size: 36rpx;
		.time{
			display: inline-block;
			color:#808080;
			font-size:20rpx ;
			margin-left:16rpx;
			.text{
				margin-right:16rpx;
			}
		}
	}		
}
.parts{
	width:100%;
	white-space: nowrap;
	margin:20rpx 0 40rpx;
	.inblock{
		display: inline-block;
		+.inblock{
			margin-left:24rpx;
		}
		.part{
			width:156rpx;
			height:86rpx;
			font-size: 24rpx;
			border-radius:8rpx;
			background:#dbdbdb;
			color:#191919;
			.name{
				width:100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: center;
			}
			&.on{
				background:#4FA388;
				color:#fff;
			}
		}
		
	}
}
.content{
	padding-bottom:20rpx;
	.list{
		padding:20rpx 28rpx;
		background:#fff;
		border-radius:10rpx;
		margin-bottom:20rpx;
		.img{
			width:84rpx;
			height:84rpx;
			border-radius:50%;
			margin-right:28rpx;
		}
		.content_right{
			flex:1;
			.name{
				font-size: 28rpx;
				color:#191919;
				margin:10rpx 0;
			}
			.top{
				.top_left{
					.price{
						color:#E84B4B;
						font-size:24rpx ;
						.num{
							font-size: 32rpx;
						}
					}
					.old{
						display: inline-block;
						margin-left:12rpx;
						color:#CCCCCC;
						transform: scale(.8);
					}
				}
				.add{
					width:42rpx;
					height:42rpx;
				}
			}
			.bottom{
				.store{
					color:#CCCCCC;
					font-size: 24rpx;
				}
				.tag {
					font-size: 20rpx;
					padding: 0 12rpx;
					background: #ff9900;
					border-radius: 6rpx;
					color:#fff;
					margin-left:-4rpx;
				}
			}
		}
		
	}
}
</style>
